import { View } from "@tarojs/components";
import { AtButton, AtList, AtListItem } from "taro-ui";

import { useUser } from "src/hooks/useUsers";
import { request } from 'src/request';
import Taro from "@tarojs/taro";
import { StatusTextMap, UserStatus } from "src/constant";

import './index.less';

function UserSetting() {
  const params = Taro.getCurrentInstance().router?.params
  const [user, refreshUser] = useUser(params?.id)
  const setStatus = (status: UserStatus) => {
    return () => {
      request.put(`/user/${user?.id}`, { status }).then(() => {
        Taro.showToast({
          title: '更新成功',
          icon: 'none',
        })
        refreshUser()
      })
    }
  }

  return (
    <View>
      <View className='header'>
        <View className='header-name'>
          用户设置
        </View>
      </View>
      <View className='body'>
        <AtList hasBorder={false}>
          <AtListItem title='用户名称' extraText={user?.name} />
          <AtListItem title='用户状态' extraText={StatusTextMap[user?.status!]} />
        </AtList>
        <View className='user-setting-btn'>
          {
            user?.status === UserStatus.PENDING &&
            <AtButton type='primary' onClick={setStatus(UserStatus.PASS)}>同意</AtButton>
          }
          {
            user?.status === UserStatus.PASS &&
            <AtButton type='primary' onClick={setStatus(UserStatus.REJECT)}>拒绝</AtButton>
          }
          {
            user?.status === UserStatus.REJECT &&
            <AtButton type='primary' onClick={setStatus(UserStatus.PASS)}>同意</AtButton>
          }
        </View>
      </View>
    </View>
  );
}

export default UserSetting;
